<template>
    <!-- 异地委托订单详情 -->
    <div class="box ">
        <h1>异地委托订单详情</h1>
        <hr>
        <div class="main clear">
            <div class="left">
                <div class="left-1">
                    订单编号:

                    <div>
                        {{ data.number }}
                    </div>

                    <div>
                        订单类型:
                        <div>
                            {{ data.orderType.orderType }}
                        </div>
                    </div>
                    <div>
                        下单时间：
                        {{ data.createTime }}
                    </div>
                </div>


                <div>
                    订单状态:
                    <div>
                        <el-select v-model="orderStatus" class="input2" @change="orderStatusChange(orderStatus)">
                            <el-option v-for="item in getStatusData" :key="item.id" :label="item.orderStatus"
                                :value="item.orderStatus">
                            </el-option>
                        </el-select>
                    </div>
                </div>
                <div>
                    联系人:
                    <div>
                        <el-input v-model="contactPerson" placeholder="请输入内容" class="input2"></el-input>
                    </div>
                </div>
                <div>
                    联系电话:
                    <div>
                        <el-input v-model="contactPhone" placeholder="请输入内容" class="input2"></el-input>
                    </div>
                </div>
                <div>
                    车牌号:
                    <div>
                        <el-input v-model="carId" placeholder="请输入车牌号" class="input2"></el-input>
                    </div>
                </div>


            </div>
            <div class="middle">

                <div>
                    是否需要赔款:
                    <div class="Bottom15px">
                        <el-radio v-model="radio" label="1">是</el-radio>
                    </div>
                </div>

                是否发送短信:
                <div class="Bottom15px">
                    <el-radio v-model="radio" label="1">是</el-radio>
                    <el-radio v-model="radio" label="2">否</el-radio>
                </div>

                短信内容:
                <div class="Bottom15px">
                    <el-input type="textarea" :rows="2" class="textarea1" v-model="cusMessage">
                    </el-input>
                </div>
                <div class="clear">
                    <div class="message-left">短信操作:</div>
                    <div class="message-right">已发送0次</div>
                </div>
                <div class="Bottom15px clear">
                    <el-button type="primary" class="message-left">生成短信</el-button>
                    <el-button type="primary" class="message-right">发送给用户</el-button>
                </div>
                <div>
                    短信内容:
                    <div class="Bottom15px">
                        <el-input type="textarea" :rows="2" class="textarea1" v-model="cusMessage">
                        </el-input>
                    </div>
                    <div class="clear">
                        <div class="message-left">短信操作:</div>
                        <div class="message-right">已发送0次</div>
                    </div>
                    <div class="Bottom15px clear">
                        <el-button type="primary" class="message-left">生成短信</el-button>
                        <el-button type="primary" class="message-right">发送给司机</el-button>
                    </div>
                </div>
            </div>
            <div class="right">
                <div class="Bottom15px">
                    特定事项:
                    <div>
                        <el-input v-model="attention" class="Bottom15px input2"></el-input>
                    </div>

                </div>
                <div class="right-1">
                    <ul class="pay1">
                        <li>支付单号:</li>
                        <li class="pay1-li">{{ orderInfo.number }}</li>
                        <li>支付方式:</li>
                        <li>微信支付/支付宝/xx银行</li>

                    </ul>

                    <ul class="pay">
                        <li>支付状态</li>
                        <li>{{ orderStatus }}</li>
                        <li>在线支付金额</li>
                        <li>0.00元data</li>
                        <li>优惠券付款</li>
                        <li>{{ orderInfo.coupon }}</li>
                    </ul>
                    <ul class="pay">
                        <li>订单总金额</li>
                        <li>{{ orderInfo.total }}</li>
                        <li>积分付款</li>
                        <li>{{ orderInfo.accumulatePoints }}</li>
                        <li>客服应付金额</li>
                        <li>0元data</li>
                    </ul>
                </div>
                <!-- <div>
                    图片附件
                </div>
                <img src="" alt=""> -->
            </div>
        </div>




        <div class="save">

            <el-button type="primary" class="saveBtn" @click="orderAdd(
                orderId, number, orderType, orderStatus, isMakeCompemsation, isSendMessage, creatTime,
                attention, cusMessage, driMessage, contactPerson, contactPhone, attachmentImg, carId, images
            )">保存</el-button>
            <el-button type="primary" @click="cancel" class="cancelBtn">取消</el-button>

        </div>
    </div>
</template>
    

<script>

export default {

    created() {
        // this.selectAll();
        console.log('路由传参', this.$route.params)
        this.selectOrderDetail(this.$route.params.data.number, this.$route.params.data.orderType.orderType,)
        this.getStatus();

    },
    data() {
        return {
            //路由传参数据
            data: this.$route.params.data,
            // 通过订单号及类型查询信息
            orderInfo: '',
            order: '',
            orderDetail: '',
            //传到后台的的数据
            //订单号 及Id
            number: '',
            orderId: '',
            //支付状态、
            orderStatus: '',
            //车牌号
            carId: '',
            isMakeCompemsation: true,
            //是否发送消息 未作绑定
            isSendMessage: true,
            //客户短信信息
            cusMessage: '',
            //司机短信信息
            driMessage: '',
            //订单类型
            orderType: '',
            //订单创建时间
            creatTime: '',
            images: "123456.jpg",
            // 2020:12:12 12:12:12


            //联系人及其电话
            contactPerson: '',
            contactPhone: '',
            //特定事项
            attention: '',
            //图片附件
            attachmentImg: "/asjflak.jsp,/kjashfa.jpg",
            radio: '1',
            input: '',
            // 订单状态  下拉框
            getStatusData: '',
            //领标新增的：
            photoAttachments: "图片附件",


        }
    },
    methods: {
        //取消按钮
        cancel() {
            this.$router.push('/order')
        },
        //赋值函数
        fuZhi() {
            //请求后端的数据 赋值给当前页面
            this.order = this.data.number,
                //传送后端的数据
                this.number = this.data.number;

            this.orderStatus = this.orderInfo.status.orderStatus;
            this.attention = this.orderDetail.attention;
            this.cusMessage = this.orderDetail.messageContent;
            this.driMessage = this.orderDetail.driMessageContent;
            this.contactPerson = this.orderDetail.contactPerson;
            this.contactPhone = this.orderDetail.contactPhone;
            this.orderId = this.orderInfo.id;
            this.carId = this.orderInfo.carId
            this.orderType = this.orderInfo.orderType.orderType
            this.creatTime = this.data.createTime


        },

        //保存验车订单
        orderAdd(
            orderId, number, orderType, orderStatus, isMakeCompemsation, isSendMessage, creatTime,
            attention, messageCus, messageDri, contactPerson, contactPhone, attachmentImg, carId, images

        ) {
            this.$http({
                url: '/remoteOrder/update',
                method: 'POST',
                data: {
                    orderId, number, orderType, orderStatus, isMakeCompemsation, isSendMessage, creatTime,
                    attention, messageCus, messageDri, contactPerson, contactPhone, attachmentImg, carId, images
                },
            })
                .then((res) => {
                    console.log('验车订单修改成功', res)
                })
                .catch((err) => {
                    console.log('验车订单修改失败', err)
                });
            this.$router.push('/order');
        },
        //点击订单编号跳转页面 
        selectOrderDetail(number, type) {
            console.log('传入的编号类型', number, type)
            this.$http({
                url: '/order/selectOrderDetail',
                method: 'POST',
                data: {
                    number, type
                }
            })
                .then((res) => {
                    this.orderInfo = res.data.order;
                    this.orderDetail = res.data.orderDetail;
                    this.fuZhi();
                    // console.log('新页面', res.data)
                    console.log('新页面order', this.orderInfo)
                    console.log('新页面detail', this.orderDetail)

                })
                .catch((err) => {
                    console.log('跳转订单失败', err)
                })
        },
        // 下拉选择框，获取订单状态
        getStatus() {
            this.$http({
                url: '/order/getStatus',
                method: 'GET',
            })
                .then((res) => {
                    console.log('订单状态数据', res.data);
                    this.getStatusData = res.data.data
                })
                .catch((err) => {
                    console.log('订单状态获取失败', err);
                })
        },


    },

}


</script>

<style lang="scss" scoped>
.box {
    min-width: 1200px;
    // height: 800px;

    h1 {
        font-size: 30px;
    }

    hr {
        margin: 20px 0 20px 0;
        border-top: 2px solid rgba(128, 128, 128, 0.753);
    }


    .main {
        margin: 0 auto;
        width: 1200px;

        .left {
            min-width: 300px;

            float: left;

            .selectStyleDiv {
                margin: 15px 0px 20px 0;
            }

            .left-1 {

                min-width: 300px;

                div {
                    margin-top: 10px;
                    margin-bottom: 10px;
                }
            }
        }

        .middle {
            min-width: 300px;
            margin-left: 150px;
            float: left;

            .message-left {
                float: left;
            }

            .message-right {
                float: right;
            }
        }

        .right {
            float: left;

            margin-left: 150px;
            min-width: 260px;
        }
    }

    .Bottom15px {
        margin: 15px 0px 15px 0;
    }

    .selectStyle {
        float: left;
        margin-right: 20px;
        width: 120px;
    }

    .input2 {
        width: 260px;
        margin: 15px 0px 15px 0;
    }

    .textarea1 {
        width: 260;
        // height: 90px;
    }


    .pay {
        float: left;
    }

    .pay1-li {
        width: 260px;
    }

    .pay li,
    .pay1 li {
        margin: 15px 10px 15px 10px;
    }

    .right-1 {
        height: 400px;
    }
}

.save {
    text-align: center;
    padding: 60px 0;

    .saveBtn {
        margin-right: 50px;
        margin-left: -50px;
    }

    .cancelBtn {
        margin-left: 50px;
    }

}
</style>